<template>
    <div ref="ec" style="min-height:300px;overflow: hidden;"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    // console.log(this.$refs)
    this.$nextTick(()=>{
      this.initEcharts();
    })
    
    
  },
  methods: {
    /**
     * 生成echarts
     */
    initEcharts() {
      var option = {
        xAxis: {
          type: "category",
          data: ["1月份", "2月份", "3月份"]
        },
        legend: {
          x: 'center',
          data: ["担保额", "保证金", "合计"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "担保额",
            data: [120, 200, 150],
            yAxisIndex: 0,
            color:"#ff9c9c",
            type: "bar"
          },
          {
            name: "保证金",
            type: "bar",
            color:"#71dcff",
            yAxisIndex: 0,
            data: [80, 50, 60]
          },
          {
            name: "合计",
            type: "bar",
            color:"#3daeff",
            yAxisIndex: 0,
            data: [200, 250, 210]
          }
        ]
      };
      this.option = option;
      this.myChart = this.$echarts.init(this.$refs.ec);
      this.myChart.setOption(option);
    }
  },
  created() {}
};
</script>
